<template>
  <div>
    <!-- 表 -->
    <DynamicParams
      ref="setMealParam"
      :showDefault="readOnly"
      :data="data"
      :customAdd="true"
      @add="addSetMeal"
      @check="showDetails"
      @modify="modifySetMeal"
      @copy="copy"
      addText="添加套餐"
      :operation="operation(readOnly)"
    >
      <el-table-column
        label="套餐名称"
        prop="name"
        align="center"
      ></el-table-column>
      <!-- <el-table-column label="最低成团人数" prop="groupPeopleNum" align="center"></el-table-column>
      <el-table-column label="最低预定人数" prop="packagePeopleNum" align="center"></el-table-column> -->
    </DynamicParams>
    <!-- <div @click="aaa">aaaaaa</div> -->
    <!-- 弹窗 -->
    <el-drawer
      v-model="drawer"
      title="添加套餐"
      direction="rtl"
      ref="drawerRef"
      :close-on-click-modal="false"
      :size="1080"
      custom-class="base_drawer add_room_layout"
    >
      <TravelPrice ref="travelPriceRef" />
      <template #footer>
        <div>
          <el-button @click="drawer = false">取消</el-button>
          <el-button type="primary" @click="save" v-if="!readOnly"
            >保存</el-button
          >
        </div>
      </template>
    </el-drawer>
    <!-- <div @click="getValue">aaaaaa</div> -->
  </div>
</template>
<script setup>
import TravelPrice from "./setMeal/TravelPrice.vue";
import DynamicParams from "@com/DynamicParams.vue";
import {
  ref,
  reactive,
  defineProps,
  defineExpose,
  defineEmits,
  watch,
  nextTick,
} from "vue";
import $ from "@util/base";
import { $msg } from "@ui/msg";

const emit = defineEmits(["programme"]);
const props = defineProps({
  readOnly: { type: Boolean, default: false },
  data: { type: Array, default: () => [] },
  modify: { type: Boolean, default: false },
});

const drawer = ref(false);
const data = ref([]);
const drawerRef = ref(null);
const travelPriceRef = ref(null);
const setMealParam = ref(null);
watch(
  () => props.data,
  (val) => {
    data.value = val;
  }
);
watch(
  () => drawer.value,
  () => {
    if (drawer.value == false) {
      travelPriceRef.value.reset();
    }
  }
);
function operation(readOnly) {
  if (readOnly) {
    return {
      copy: false,
      move: false,
      modify: false,
      del: false,
      add: false,
      check: true,
    };
  } else {
    return {
      copy: true,
      move: true,
      modify: true,
      del: true,
      add: true,
      check: false,
    };
  }
}

function aaa() {
  console.log(setMealParam.value.getValue());
}

var modifyIndex = null;
function addSetMeal() {
  modifyIndex = null;
  openPriceParams();
  nextTick(() => {
    travelPriceRef.value.clear();
  });
}
function showDetails(index) {
  modifyIndex = null;
  openPriceParams();
  nextTick(() => {
    travelPriceRef.value.improtData(setMealParam.value.getValue()[index]);
  });
}
function modifySetMeal(index) {
  modifyIndex = index;
  openPriceParams();
  nextTick(() => {
    travelPriceRef.value.improtData(setMealParam.value.getValue()[index]);
  });
}

function copy(index) {
  $msg.succ("复制成功");
  setTimeout(() => {
    openPriceParams();
    nextTick(() => {
      let copyData = setMealParam.value.getValue()[index];
      copyData.name = null;
      copyData.id = null;
      copyData.packageCode = null;
      travelPriceRef.value.improtData(copyData);
    });
  }, 1000);
}

function openPriceParams() {
  drawer.value = true;
}

function closePriceParams() {
  drawer.value = false;
}

function save() {
  travelPriceRef.value.save((res) => {
    if (res != false) {
      console.log(res);
      if (modifyIndex != null) {
        setMealParam.value.modifyData(modifyIndex, res);
      } else {
        setMealParam.value.addData(res);
      }

      closePriceParams();
      let data = [];
      for (const item of setMealParam.value.getReactiveValue()) {
        data.push({ packageName: item.name });
      }
      emit("programme", data);
    }
  });
}

function chack() {
  if (setMealParam.value.getReactiveValue().length <= 0) {
    return false;
  }
  return true;
}

function chackName(data) {
  var set = new Set();
  data.forEach((e) => {
    set.add(e.name);
  });
  return set.size == data.length;
}

function getValue() {
  let value = setMealParam.value.getValue();
  if (value.length <= 0) {
    return false;
  }

  if (!chackName(value)) {
    $msg.error("套餐名不能重复");
    return false;
  }
  return value;
}

defineExpose({ chack, getValue });
</script>
<style scoped>
.el-checkbox {
  margin-right: 0 !important;
  display: block !important;
}

::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

::v-deep input[type="number"] {
  -moz-appearance: textfield !important;
}
</style>
<style lang="scss">
.small_date_picker {
  .el-date-editor.el-input,
  .el-date-editor.el-input__wrapper {
    width: 250px !important;
  }
}
</style>
